<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="good_table">
        <el-row :gutter="20">
          <div class="demo-input-suffix" style="float: left">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="商品名称">
                <el-input
                  v-model="good_queryInfo.query"
                  placeholder="商品名称"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getGoodList">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="good_add_dialogVisible = true"
                  >添加商品</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button type="warning" @click="recyclebin = true"
                  >商品回收站</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-row>
        <template>
          <!-- <img src="/Imgs/1.jpg" alt="haha"> -->
          <el-table :data="good_tableDate" border stripe style="width: 100%">
            <el-table-column type="index"> </el-table-column>
            <el-table-column prop="shopId" label="商品ID"> </el-table-column>
            <el-table-column prop="shopName" label="商品名称">
            </el-table-column>
            <el-table-column prop="shopPrice" label="商品单价">
            </el-table-column>
            <el-table-column
              prop="shopState"
              label="商品状态"
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column prop="shopStock" label="商品库存">
            </el-table-column>
            <el-table-column prop="shopTime" label="商品上架时间">
              <template slot-scope="scope">
                {{ new Date(scope.row.shopTime).toLocaleString() }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="shopCategoryId" label="商品类型">
            </el-table-column> -->
            <el-table-column prop="shopDescription" label="商品描述">
            </el-table-column>
            <el-table-column label="商品简图">
              <template slot-scope="scope">
                <img
                  :src="scope.row.imageIds[0].imagePath"
                  min-width="70"
                  height="70"
                />
              </template>
            </el-table-column>
            <el-table-column prop="goodset" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="showEditMessage(scope.$index)"
                ></el-button>
                <el-button
                  type="success"
                  @click="showEditMessages(scope.row)"
                  plain
                  >评论</el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="deleteGood(scope.row)"
                ></el-button>
                <el-button
                  type="warning"
                  icon="el-icon-star-off"
                  size="mini"
                  @click="guige(scope)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="good_queryInfo.pagenum"
            :page-sizes="[1, 3, 6, 9, 12]"
            :page-size="good_queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="good_pageTotal"
            :enterable="false"
          >
          </el-pagination>
        </template>

        <el-dialog
          title="商品回收站"
          :visible.sync="recyclebin"
          @closed="handleClose"
          width="80%"
        >
          <el-button type="success" @click="recoverdata"
            >批量恢复商品</el-button
          >
          <template>
            <el-table
              @selection-change="getshopids"
              :data="good_recyclebin"
              border
              stripe
              style="width: 100%"
            >
              <el-table-column
                type="selection"
                class="selection"
                :selectable="checkboxInit"
                prop="shopId"
                width="55"
              >
              </el-table-column>
              <el-table-column prop="shopId" label="商品ID"> </el-table-column>
              <el-table-column prop="shopName" label="商品名称">
              </el-table-column>
              <el-table-column prop="shopPrice" label="商品单价">
              </el-table-column>
              <el-table-column
                prop="shopState"
                label="商品状态"
                :formatter="formatter"
              >
              </el-table-column>
              <el-table-column prop="shopStock" label="商品库存">
              </el-table-column>
              <el-table-column prop="shopTime" label="商品上架时间">
                <template slot-scope="scope">
                  {{ new Date(scope.row.shopTime).toLocaleString() }}
                </template>
              </el-table-column>
              <!-- <el-table-column prop="shopCategoryId" label="商品类型">
            </el-table-column> -->
              <el-table-column prop="shopDescription" label="商品描述">
              </el-table-column>
              <el-table-column label="商品简图">
                <template slot-scope="scope">
                  <img
                    :src="scope.row.imageIds[0].imagePath"
                    min-width="70"
                    height="70"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="goodset" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="deleteGoods(scope.row)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="good_queryInfo.pagenum"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="good_queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :enterable="false"
            >
            </el-pagination>
          </template>
        </el-dialog>
        <el-dialog
          title="添加商品"
          :visible.sync="good_add_dialogVisible"
          width="50%"
          @close="closeAddDialog"
        >
          <el-form
            :model="good_addForm"
            status-icon
            :rules="good_addFormRules"
            ref="good_addFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="Shop_Name">
              <el-input
                v-model="good_addForm.ShopName"
                placeholder="请输入商品名称"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="商品单价"
              placeholder="请定义商品单价"
              prop="ShopPrice"
            >
              <el-input
                v-model="good_addForm.ShopPrice"
                placeholder="请输入商品单价"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品状态" prop="ShopState">
              <div>
                <el-radio v-model="good_addForm.ShopState" label="1" border
                  >上架</el-radio
                >
                <el-radio v-model="good_addForm.ShopState" label="2" border
                  >下架</el-radio
                >
              </div>
            </el-form-item>
            <el-form-item label="商品库存" prop="ShopStock">
              <el-input
                v-model="good_addForm.ShopStock"
                placeholder="请输入商品库存"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品类别" prop="ShopCategoryId">
              <el-input
                v-model="good_addForm.ShopCategoryId"
                placeholder="请选择商品类别"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="父级" prop="parentname">
              
              <el-cascader
                style="width: 100%"
                :props="{
                  children: 'children',
                  label: 'cat_name',
                  value: 'cat_id',
                  checkStrictly: true,
                }"
                v-model="addCateform.parentname"
                @change="getCurrentParent"
                :options="addCateform.parentlist"
              ></el-cascader>
              
            </el-form-item> -->
            <el-form-item label="商品描述" prop="ShopDescription">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入商品描述"
                v-model="good_addForm.ShopDescription"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="商品详情" prop="ShopDetailCate">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入商品详情"
                v-model="good_addForm.ShopDetailCate"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="商品图片">
              <el-upload
                ref="upload"
                action="https://localhost:44379/api/SexShopModel/FileImages"
                list-type="picture-card"
                :limit="3"
                show-file-list
                :auto-upload="false"
                :on-change="change"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                :headers="tokenss"
                multiple
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt /> 13
              </el-dialog>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="good_add_dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="uploadimg">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title="添加商品规格"
          :visible.sync="guigess"
          width="50%"
          @close="closeAddDialog"
        >
          <el-form
            :model="GuiGe_addForm"
            status-icon
            :rules="GuiGe_addFormRules"
            ref="GuiGe_addFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品ID" prop="ProductSpecsShopId">
              <el-input
                v-model="GuiGe_addForm.ProductSpecsShopId"
                :disabled="true"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="颜色" prop="ProductSpecsSpecs">
              <div>
                <el-radio
                  v-model="GuiGe_addForm.ProductSpecsSpecs"
                  label="红色"
                  border
                  >红色</el-radio
                >
                <el-radio
                  v-model="GuiGe_addForm.ProductSpecsSpecs"
                  label="蓝色"
                  border
                  >蓝色</el-radio
                >
                <el-radio
                  v-model="GuiGe_addForm.ProductSpecsSpecs"
                  label="绿色"
                  border
                  >绿色</el-radio
                >
                <el-radio
                  v-model="GuiGe_addForm.ProductSpecsSpecs"
                  label="黄色"
                  border
                  >黄色</el-radio
                >
                <el-radio
                  v-model="GuiGe_addForm.ProductSpecsSpecs"
                  label="五彩"
                  border
                  >五彩</el-radio
                >
              </div>
            </el-form-item>

            <el-form-item label="尺寸" prop="ProductSpecsSpecs1">
              <div>
                <el-radio
                  v-model="GuiGe_addForm.ProductSpecsSpecs1"
                  label="大"
                  border
                  >大</el-radio
                >
                <el-radio
                  v-model="GuiGe_addForm.ProductSpecsSpecs1"
                  label="中"
                  border
                  >中</el-radio
                >
                <el-radio
                  v-model="GuiGe_addForm.ProductSpecsSpecs1"
                  label="小"
                  border
                  >小</el-radio
                >
              </div>
            </el-form-item>

            <el-form-item label="商品库存" prop="ProductSpecsStock">
              <el-input
                v-model="GuiGe_addForm.ProductSpecsStock"
                placeholder="请输入商品库存"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="商品单价" prop="ProductSpecsPrice">
              <el-input
                v-model="GuiGe_addForm.ProductSpecsPrice"
                placeholder="请选择商品类别"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="guigess = false">取 消</el-button>
            <el-button type="primary" @click="submitCreateGuiGe"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <el-dialog
          title="修改商品"
          :visible.sync="good_update_dialogVisible"
          width="50%"
          @close="closeAddDialog"
        >
          <el-form
            :model="good_updateForm"
            status-icon
            :rules="good_updateFormRules"
            ref="good_updateFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="ShopName">
              <el-input
                v-model="good_updateForm.shopName"
                placeholder="请输入商品名称"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="商品单价"
              placeholder="请定义商品单价"
              prop="ShopPrice"
            >
              <el-input
                v-model="good_updateForm.shopPrice"
                placeholder="请输入商品单价"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品状态" prop="ShopState">
              <div>
                <el-radio v-model="good_updateForm.shopState" label="1" border
                  >上架</el-radio
                >
                <el-radio v-model="good_updateForm.shopState" label="2" border
                  >下架</el-radio
                >
              </div>
            </el-form-item>
            <el-form-item label="商品库存" prop="ShopStock">
              <el-input
                v-model="good_updateForm.shopStock"
                placeholder="请输入商品库存"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品类别" prop="ShopCategoryId">
              <el-input
                v-model="good_updateForm.shopCategoryId"
                placeholder="请选择商品类别"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="ShopDescription">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入商品描述"
                v-model="good_updateForm.shopDescription"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="商品详情" prop="ShopDetailCate">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入商品详情"
                v-model="good_updateForm.shopDetailCate"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="商品图片">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :name="good_updateForm.haha"
                :on-change="handleDownload(file)"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="good_add_dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitUpdateForm"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <el-dialog title="提示" :visible.sync="fileVisble" width="50%">
          <img :src="filePath" style="width: 100%" />
        </el-dialog>
      </div>
      <el-dialog
        title="商品评论"
        :visible.sync="dialogVisibles"
        width="70%"
        @close="this.dialogVisibles = false"
        :close-on-click-modal="false"
      >
        <template>
          <el-table :data="barjl" border stripe style="width: 100%">
            <el-table-column prop="commentUserId" label="评论账号">
            </el-table-column>
            <el-table-column prop="commentTime" label="评论时间">
            </el-table-column>
            <el-table-column prop="commentContent" label="评论内容">
            </el-table-column>

            
          </el-table>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  created() {
    console.log('我的本地token', window.sessionStorage.getItem('token'))
    //文档就绪函数加载商品数据
    this.getGoodList()
    this.getGoodrecyclebin()
  },
  data() {
    return {
      guigess: false, //添加商品规格的对话框
      //商品规格添加时的表单数据
      GuiGe_addForm: {
        ProductSpecsId: '',
        ProductSpecsShopId: '',
        ProductSpecsSpecs: '',
        ProductSpecsSpecs1: '',
        ProductSpecsStock: '1',
        ProductSpecsPrice: '',
      },
      //控制评论弹层
      dialogVisibles: false,
      //存放回收站选中的ID
      multipleSelection: [],
      recyclebin: false,

      //上传文件需要的参数
      dialogImageUrl: '',
      dialogVisible: false,
      images: [],

      disabled: false,
      good_tableDate: [],
      good_recyclebin: [],
      good_queryInfo: {
        query: '',
        price: '',
        pagenum: 1,
        pagesize: 3,
      },
      good_pageTotal: 0,
      good_add_dialogVisible: false, //添加用户对话框
      good_update_dialogVisible: false, //修改用户信息对话框

      //商品添加时的表单数据
      good_addForm: {
        ShopId: '',
        ShopName: '',
        ShopPrice: '',
        ShopState: '1',
        ShopStock: '',
        ShopCategoryId: '',
        ShopDetailCate: '',
        ShopDescription: '',
        ImgUrl: '',
      },
      //这是修改商品的表单数据
      good_updateForm: {
        shopId: '',
        shopName: '',
        shopPrice: '',
        shopState: '1',
        shopStock: '',
        shopCategoryId: '',
        shopDetailCate: '',
        shopDescription: '',
        pics: '',
        attrs: '',
      },
      //添加商品的一个表单验证
      good_addFormRules: {
        ShopName: [
          {
            required: true,
            message: '请输入商品的名称',
            trigger: 'blur',
          },
        ],
        ShopPrice: [
          {
            required: true,
            message: '请输入商品的单价',
            trigger: 'blur',
          },
        ],
        ShopStock: [
          {
            required: true,
            message: '请输入商品的库存',
            trigger: 'blur',
          },
        ],
        ShopDescription: [
          {
            required: true,
            message: '请输入商品的描述',
            trigger: 'blur',
          },
        ],
        ShopDetailCate: [
          {
            required: true,
            message: '请输入商品的详情',
            trigger: 'blur',
          },
        ],
      },
      fileList: [],
      filePath: '',
      fileVisble: false,
      // objHeader: {
      //   Authorization: window.sessionStorage.getItem('token'),
      // },
    }
  },
  computed: {
    tokenss() {
      // config.headers.Authorization = window.sessionStorage.getItem('token');
      return {
        Authorization: window.sessionStorage.getItem('token'),
      }
    },
  },
  methods: {
    //添加商品规格
    guige(scope) {
      this.GuiGe_addForm.ProductSpecsShopId = scope.row.shopId
      this.guigess = true
    },

    //提交商品规格信息
    submitCreateGuiGe() {
      this.$refs['GuiGe_addFormRef'].validate(async (valid) => {
        if (valid) {
          console.log(this.GuiGe_addForm, 'wwf规格表单')
          //如果验证通过，那么使用axios调用post请求来修改
          this.axios
            .post(
              //api链接
              'https://localhost:44379/api/ProductSpecs/CreateProductSpecs',
            //  this.$qs.parse(this.GuiGe_addForm)
              //这个是来用qs做一个转换，否则会报错400，数据格式错误
              this.$qs.stringify({
                // this.GuiGe_addForm
                ProductSpecsShopId:this.GuiGe_addForm.ProductSpecsShopId,
                //ProductSpecsSpecs:{'颜色：':this.GuiGe_addForm.ProductSpecsSpecs,'尺寸：':this.GuiGe_addForm.ProductSpecsSpecs1},
                //ProductSpecsSpecs:this.GuiGe_addForm.ProductSpecsSpecs1,
                ProductSpecsStock:this.GuiGe_addForm.ProductSpecsStock,
                ProductSpecsPrice:this.GuiGe_addForm.ProductSpecsPrice,
                //{"内存:""2G","颜色:""红色"}
                //this.GuiGe_addForm.ProductSpecsSpecs+this.GuiGe_addForm.ProductSpecsSpecs1
                ProductSpecsSpecs:'{'+"颜色："+this.GuiGe_addForm.ProductSpecsSpecs+","+"尺寸："+this.GuiGe_addForm.ProductSpecsSpecs1+"}"
              })
            )
            .then((res) => {
              //修改完成的回调
              if (res.data.status == 1) {
                //返回成功，弹窗提示
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  
                })
                //关闭弹窗
                this.good_update_dialogVisible = false
                //刷新页面
                this.getGoodList()
              }
            })
        }
      })
    },
    //查看该商品的评论
    showEditMessages(row) {
      this.axios
        .get(
          'https://localhost:44336/api/ShopComment/GetCommentData?shopId=' +
            row.shopId
        )
        .then((res) => {
          //console.log(res.data.data,"看看看")
          //限时完成后的回调
          this.dialogVisibles = true
          this.barjl = res.data.data
        })
    },
    uploadimg() {
      this.$refs.upload.submit()
    },
    //上传图片需要的方法（V2）
    handleRemove(file, fileList) {
      //alert(1)
      this.images.forEach((element, index, arr) => {
        if (file.name === element.oldFile.name) {
          arr.splice(index, 1)
        }
      })
      console.log(this.images)
    },
    handlePictureCardPreview(file) {
      //alert(2)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleUploadSuccess(response, file, fileList) {
      //alert(1)
      this.good_addForm.ImgUrl = '/Imgs/Thumbnail/' + response.newFileName
      //console.log(this.good_addForm.shopName,"商品图片路径")
      //调用添加方法
      this.submitAddForm()

      // console.log(response.newFileName, '哈哈')
      // console.log(file, '嘎嘎')
      // console.log(fileList, '呵呵')
      this.images.push({
        newFileName: response.newFileName, // 服务器端的新文件名，即后端回调过来的数据
        oldFile: {
          name: file.name, // 上传之前的文件名，客户端的
          url: file.url, // 页面显示上传的图片的src属性绑定用的
        },
      })
    },
    handleUploadError(response, file, fileList) {
      this.$message.error(JSON.parse(response.message).msg)
    },

    //格式化表格数据
    formatter(row, column) {
      if (row.shopState == 1) {
        return '上架'
      } else if (row.shopState == 0) {
        return '下架'
      }
    },
    //调用后台api完成批量恢复数据
    recoverdata() {
      //判断ID是否为空验证
      if (this.multipleSelection == '') {
        this.$message({
          message: '请至少选择一项',
          type: 'warning',
        })
      } else {
        this.axios
          .post(
            'https://localhost:44379/api/SexShopModel/RecoverShop?ids=' +
              this.multipleSelection.toString()
          )
          .then((res) => {
            if (res.data.status > 0) {
              //返回成功，弹窗提示
              this.$message({
                message: res.data.msg,
                type: 'success',
              })
              //关闭弹窗
              this.recyclebin = false
              //刷新页面
              this.getGoodList()
              this.getGoodrecyclebin()
            }
          })
      }
    },
    //获取回收站选中的ID
    getshopids(val) {
      //循环提取ID
      for (let item of val) {
        this.multipleSelection.push(item.shopId)
      }
    },
    //商品回收站的数据获取
    getGoodrecyclebin() {
      this.axios
        .get('https://localhost:44379/api/SexShopModel/GetRecycle')
        .then((res) => {
          //console.log(res, '回收站数据')
          //限时完成后的回调
          this.good_recyclebin = res.data
          console.log('回收站数据', this.good_recyclebin)
          //this.good_pageTotal = res.data.count
        })
    },
    //商品的显示
    getGoodList() {
      this.axios
        .get('https://localhost:44379/api/SexShopModel/GetSexShopModel', {
          ///api/SexShop_Model/Update
          params: {
            //传参
            shopName: this.good_queryInfo.query,
            pageIndex: this.good_queryInfo.pagenum,
            pageSize: this.good_queryInfo.pagesize,
          },
        })
        .then((res) => {
          //限时完成后的回调
          this.good_tableDate = res.data.data
          console.log(this.good_tableDate, '显示数据')
          this.good_pageTotal = res.data.count
        })
    },

    //煤业多少条
    handleSizeChange(val) {
      //切换每页显示多少条
      console.log(`每页 ${val} 条`);
      this.good_queryInfo.pagesize = val
      this.getGoodList()
    },
    //每页数据容量
    handleCurrentChange(val) {
      //切换当前页数
      console.log(`当前页: ${val}`);
      this.good_queryInfo.pagenum = val
      this.getGoodList()
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      //alert(1)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      //console.log(this.good_addForm.haha)
      this.fileList = file
      // console.log(this.fileList, 'fff')
      // console.log(file, 'file')
    },
    //添加用户
    submitAddForm() {
      //alert(55)
      this.$refs['good_addFormRef'].validate(async (valid) => {
        if (valid) {
          //使用axios的post请求调用api完成添加功能
          this.axios
            .post(
              'https://localhost:44379/api/SexShopModel/Create',
              this.$qs.stringify({
                ShopName: this.good_addForm.ShopName,
                ShopPrice: this.good_addForm.ShopPrice,
                ShopState: this.good_addForm.ShopState,
                ShopStock: this.good_addForm.ShopStock,
                ShopCategoryId: this.good_addForm.ShopCategoryId,
                ShopDetailCate: this.good_addForm.ShopDetailCate,
                ShopDescription: this.good_addForm.ShopDescription,
                ImgUrl: this.good_addForm.ImgUrl,
              })
            )
            .then((res) => {
              if (res.data.status == 1) {
                //返回成功，弹窗提示
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                })
                //关闭弹窗
                this.good_add_dialogVisible = false
                //刷新页面
                this.getGoodList()
              }
            })
        } else {
          return false
        }
      })
    },
    //重置添加商品表单
    closeAddDialog() {
      this.good_add_dialogVisible = false
      this.$refs['good_addFormRef'].resetFields()
    },
    //回显商品信息
    showEditMessage($index) {
      //console.log(this.good_tableDate[$index],"wfwf")
      this.good_updateForm = this.good_tableDate[$index]
      this.good_update_dialogVisible = true
    },
    //提交更新用户信息
    submitUpdateForm() {
      this.$refs['good_updateFormRef'].validate(async (valid) => {
        if (valid) {
          //如果验证通过，那么使用axios调用post请求来修改
          this.axios
            .post(
              //api链接
              'https://localhost:44379/api/SexShopModel/Update',
              //这个是来用qs做一个转换，否则会报错400，数据格式错误
              this.$qs.stringify({
                ShopId: this.good_updateForm.shopId,
                ShopName: this.good_updateForm.shopName,
                ShopPrice: this.good_updateForm.shopPrice,
                ShopState: this.good_updateForm.shopState,
                ShopStock: this.good_updateForm.shopStock,
                ShopCategoryId: this.good_updateForm.shopCategoryId,
                ShopDetailCate: this.good_updateForm.shopDetailCate,
                ShopDescription: this.good_updateForm.shopDescription,
              })
            )
            .then((res) => {
              //修改完成的回调
              if (res.data.status == 1) {
                //返回成功，弹窗提示
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                })
                //关闭弹窗
                this.good_update_dialogVisible = false
                //刷新页面
                this.getGoodList()
              }
            })
        }
      })
    },
    //重置修改商品表单
    closeUpdateDialog() {
      this.good_update_dialogVisible = false
      this.$refs['good_updateFormRef'].resetFields()
    },
    //删除（逻辑删除，软删除）
    deleteGood(rrr) {
      this.$confirm('确定把' + rrr.shopName + '放入回收站吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.axios
            .post(
              'https://localhost:44379/api/SexShopModel/SoftDelete?id=' +
                rrr.shopId
            )
            .then((res) => {
              if (res.data.status == 1) {
                this.getGoodList()
                this.getGoodrecyclebin()
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                })
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已放弃加入回收站',
          })
        })
    },
    //删除（彻底删除）
    deleteGoods(rrr) {
      this.$confirm('是否彻底删除商品' + rrr.shopName, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //alert(rrr.shopId)
          this.axios
            .post(
              'https://localhost:44379/api/SexShopModel/Delelte?id=' +
                rrr.shopId
            )
            .then((res) => {
              if (res.data.status == 1) {
                this.getGoodrecyclebin()
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                })
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>
<style lang="less" scoped>
.good_table {
  .good_table_header {
    .good_search_input {
      width: 30%;
      float: left;
    }
    .good_search_button {
      background-color: #dcdfe6;
      box-shadow: 0 0 10px #ddd; //加阴影，向外扩散10像素
      float: left;
      width: 6%;
    }
    .good_add_button {
      width: 10%;
      padding-left: 20px;
      float: left;
    }
  }
}
</style>